<div class="container">
  <div class="columns is-centered">
    <div class="box column is-one-third">
      <h1 class="title has-text-centered">Typing Challenge</h1>

      <p class="has-text-centered">
        @for (letter of randomText; track $index) {

          <span [class] ="compare(letter,enteredText[$index])">
            {{ letter }}
          </span>
        }
      </p>

      <div class="field">
        <input class="input" (input)="onInput($event.target.value)"/>
      </div>

      @if(enteredText === randomText){
        <div class="box has-text-centered">
          <h1 class="title">Success!</h1>
        </div>
      }

    </div>
  </div>
</div>
